<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import CreateQuestionPanel from '@/components/bank/create/CreateQuestionPanel.vue'
import QuestionGroupSettings from '@/components/bank/shared/QuestionGroupSettings.vue'
import QuestionList from '@/components/bank/shared/QuestionList.vue'
import BigButton from '@/components/common/BigButton.vue'
import message from '@/components/common/message'
import TextArea from '@/components/common/TextArea.vue'
import TextInput from '@/components/common/TextInput.vue'
import { useQuestionGroup } from '@/hooks/bank/useQuestionGroup'

defineOptions({
  name: 'QuestionGroupEditor',
})

const router = useRouter()
const route = useRoute()
const questionGroupId = route.params.id as string | undefined

// 使用共享的题目管理逻辑
const {
  questionList,
  editingQuestion,
  isCreateQuestionPopupVisible,
  questionGroupSettings,
  canSave,
  handleOpenCreateQuestion,
  handleOpenEditQuestion,
  handleCreateQuestion,
  handleCloseCreateQuestionPopup,
  removeQuestion,
  moveQuestionUp,
  moveQuestionDown,
  getEditingIndex,
  saveQuestionGroup,
  articleAuthor,
  articleContent,
  articleTitle,
} = useQuestionGroup(questionGroupId)

// 保存题组
async function handleSaveQuestionGroup() {
  if (!articleAuthor.value) {
    message.error('请填写文章作者')
    return
  }
  if (!articleContent.value) {
    message.error('请填写文章内容')
    return
  }
  await saveQuestionGroup({
    title: articleTitle.value,
    author: articleAuthor.value,
    content: articleContent.value,
  })
  router.push('/bank')
}
</script>

<template>
  <div class="card-area">
    <div class="card-header">
      <div class="card-title">
        阅读文本
      </div>
    </div>

    <div class="text-input-area">
      <TextInput
        v-model="articleTitle"
        class="title-input"
        label="文章题目:"
        placeholder="请输入文章题目"
      />
      <TextInput
        v-model="articleAuthor"
        class="title-input"
        label="文章作者:"
        placeholder="请输入文章作者"
      />
      <TextArea
        v-model="articleContent"
        label="文章内容:"
        placeholder="请在此粘贴或输入文章内容......"
        :min-height="200"
        :max-height="200"
      />
    </div>
  </div>
  <QuestionList
    :questions="questionList"
    @create-question="handleOpenCreateQuestion"
    @edit-question="handleOpenEditQuestion"
    @remove-question="removeQuestion"
    @move-question-up="moveQuestionUp"
    @move-question-down="moveQuestionDown"
  />
  <QuestionGroupSettings v-model="questionGroupSettings" />

  <BigButton
    class="save-btn"
    text="保存题组"
    :disabled="!canSave"
    @click="handleSaveQuestionGroup"
  />

  <CreateQuestionPanel
    v-if="isCreateQuestionPopupVisible"
    :init-question="editingQuestion"
    :visible="isCreateQuestionPopupVisible"
    :editing-index="getEditingIndex()"
    @close="handleCloseCreateQuestionPopup"
    @confirm="handleCreateQuestion"
  />
</template>

<style scoped>
.save-btn {
  margin-top: 2rem;
}

.card-area {
  padding: 12px 19px 20px 19px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;

  .card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .card-title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }

    .card-opr-container {
      display: flex;
      gap: 8px;
    }
  }
}

.text-input-area {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .title-input {
    width: 40%;
  }
}
</style>
